<template>
  <div class="attachment-container">
    <h3>附件存储</h3>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="file-cate-card file-cate-image">
          <div class="icon-name">
            <el-icon>
              <ele-PictureFilled/>
            </el-icon>
            <span>图片</span>
          </div>
          <p class="used-text">24G&nbsp;&nbsp;已使用</p>
          <p class="used-progress">
            <el-progress :text-inside="false" color="#676bfb" :stroke-width="10" :show-text="false" :percentage="50"/>
          </p>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="file-cate-card file-cate-doc">
          <div class="icon-name">
            <el-icon>
              <ele-Document/>
            </el-icon>
            <span>文档</span>
          </div>
          <p class="used-text">24G&nbsp;&nbsp;已使用</p>
          <p class="used-progress">
            <el-progress :text-inside="false" color="#ffb366" :stroke-width="10" :show-text="false" :percentage="20"/>
          </p>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="file-cate-card file-cate-music">
          <div class="icon-name">
            <el-icon>
              <ele-Mic/>
            </el-icon>
            <span>音频</span>
          </div>
          <p class="used-text">24G&nbsp;&nbsp;已使用</p>
          <p class="used-progress">
            <el-progress :text-inside="false" color="#d765fb" :stroke-width="10" :show-text="false" :percentage="10"/>
          </p>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="file-cate-card file-cate-video">
          <div class="icon-name">
            <el-icon>
              <ele-VideoPlay/>
            </el-icon>
            <span>视频</span>
          </div>
          <p class="used-text">24G&nbsp;&nbsp;已使用</p>
          <p class="used-progress">
            <el-progress :text-inside="false" color="#e91e63" :stroke-width="10" :show-text="false" :percentage="10"/>
          </p>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <h3>本地磁盘：34G</h3>
        <p class="cate-local-per">
          <span>图片13G</span>
          <span>文档2G</span>
          <span>音频2G</span>
          <span>视频17G</span>
        </p>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <h3>华为OBS：40G</h3>
        <p class="cate-hwobs-per">
          <span>图片13G</span>
          <span>文档2G</span>
          <span>音频2G</span>
          <span>视频17G</span>
        </p>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
        <h3>最近更新</h3>
        <div>
          <el-table :data="latestFiles" style="width: 100%">
            <el-table-column prop="name" label="文件名"/>
            <el-table-column prop="size" label="文件大小"/>
            <el-table-column prop="type" label="文件类型"/>
            <el-table-column prop="date" label="更新时间"/>
          </el-table>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
        <h3>xxx</h3>
        <div>
          sdsdsd
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import {toRefs, reactive, onBeforeMount, defineComponent} from 'vue';

export default defineComponent({
  name: 'apiV1AttachmentStatistic',
  setup() {
    const state = reactive({
      queryParams: {
        title: "",
        component: ""
      },
      latestFiles: [
        {
          date: '2016-05-03 12:23:12',
          name: 'dshagoiheoru098q3u4.txt',
          size: '324.33KB',
          type: 'txt/plain',
        },
        {
          date: '2016-05-03 12:23:12',
          name: 'dshagoiheoru098q3u4.txt',
          size: '324.33KB',
          type: 'txt/plain',
        },
        {
          date: '2016-05-03 12:23:12',
          name: 'dshagoiheoru098q3u4.txt',
          size: '324.33KB',
          type: 'txt/plain',
        },
        {
          date: '2016-05-03 12:23:12',
          name: 'dshagoiheoru098q3u4.txt',
          size: '324.33KB',
          type: 'txt/plain',
        },
        {
          date: '2016-05-03 12:23:12',
          name: 'dshagoiheoru098q3u4.txt',
          size: '324.33KB',
          type: 'txt/plain',
        },
        {
          date: '2016-05-03 12:23:12',
          name: 'dshagoiheoru098q3u4.txt',
          size: '324.33KB',
          type: 'txt/plain',
        },
        {
          date: '2016-05-03 12:23:12',
          name: 'dshagoiheoru098q3u4.txt',
          size: '324.33KB',
          type: 'txt/plain',
        },
        {
          date: '2016-05-03 12:23:12',
          name: 'dshagoiheoru098q3u4.txt',
          size: '324.33KB',
          type: 'txt/plain',
        },
        {
          date: '2016-05-03 12:23:12',
          name: 'dshagoiheoru098q3u4.txt',
          size: '324.33KB',
          type: 'txt/plain',
        }
      ],
    });
    onBeforeMount(() => {

    });
    return {
      ...toRefs(state)
    };
  },
});
</script>
<style scoped lang="scss">
.attachment-container {
  padding-left: 20px;
  padding-right: 20px;
  h3 {
    margin: 10px 0;
    font-size: 15px;
    color: var(--el-text-color-primary);
  }

  .cate-local-per,
  .cate-hwobs-per {
    color: #ffffff;
    padding: 6px 0 20px 0;

    span {
      font-size: 12px;
      text-align: center;
      display: inline-block;
      height: 20px;
      line-height: 20px;
    }

    span:nth-child(1) {
      background-color: #676bfb;
      width: 30%;
      border-radius: 10px 0 0 10px;
    }

    span:nth-child(2) {
      background-color: #ffb366;
      width: 10%;
    }

    span:nth-child(3) {
      background-color: #d765fb;
      width: 10%;
    }

    span:nth-child(4) {
      background-color: #e91e63;
      width: 50%;
      border-radius: 0 10px 10px 0;
    }
  }

  .file-cate-card {
    border-radius: 5px;
    display: block;
    width: 100%;
    height: 140px;
    padding: 20px;

    .icon-name {
      display: inline-flex;
      align-items: center;
      margin-bottom: 20px;

      .el-icon {
        padding: 10px;
        width: 40px;
        height: 40px;
        font-size: 20px;
        color: #efefef;
        border-radius: 10px;
      }

      span {
        font-weight: bold;
        font-size: 18px;
        margin-left: 15px;
      }
    }

    .used-text {
      color: grey;
      font-size: 13px;
      margin-bottom: 6px;
    }
  }

  .file-cate-image {
    background-color: #f4f4ff;

    .el-icon {
      background-color: #676bfb;
    }
  }

  .file-cate-doc {
    background-color: #f4f4ff;

    .el-icon {
      background-color: #ffb366;
    }
  }

  .file-cate-music {
    background-color: #f4f4ff;

    .el-icon {
      background-color: #d765fb;
    }
  }

  .file-cate-video {
    background-color: #f4f4ff;

    .el-icon {
      background-color: #e91e63;
    }
  }
}
</style>
